﻿@model MMITWeb.Models.SendMoneyViewModel
           
@{
    ViewBag.Title = "Transactions: Send Money";
    
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#RecipientId').bind('valueChange', function (e) {
            var id = $('#RecipientId').val();

            if (id == '0' || id == "") {
                alert('[Error: Empty Beneficiary ] Please select a Stored Beneficiary');
            } else {
                $.ajax({
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html',
                    url: 'StoredBeneficiaryHandler/',
                    dataType: 'html',
                    data: {
                        RecipientId: id
                    }
                }).success(function (result) {
                    // Display the section contents.
                    result = eval("(" + result + ")");
                    //alert(result.CountryId);
                    $('#FirstName').val(result.FirstName);
                    $('#LastName').val(result.LastName);
                    $('#RecipientMSISDN').val(result.Mobile);
                    $('#IdentificationTypeId').data('tDropDownList').value(result.IdentTypeId);
                    $('#IdentificationNumber').val(result.IdentNumber);
                    $('#CountryId').data('tDropDownList').value(result.CountryId);
                }).error(function (xhr, status) {
                    alert(xhr.responseText);
                });
            }
        });
        $("#CountryId").bind('valueChange', function (e) {
            var countryId = $("#CountryId").val();
            if (countryId == '0' || countryId == "") {
                alert('[Error: Select a Country] Please select a Country');
            }
            else {
                $.ajax({
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html',
                    url: '../UserAccount/GetCountryCode/',
                    dataType: 'html',
                    data: {
                        CountryId: countryId
                    }
                }).success(function (result) {
                    // Display the section contents.
                    result = eval("(" + result + ")");
                    $('#CountryCode').val('\+' + result.code);
                    //alert(result.code);
                });

            }
        });
        $("#AccountId").bind('valueChange', function (e) {
            var accountId = $("#AccountId").val();
            if (accountId == '0' || accountId == "") {
                alert('[Error: Select a Wallet] Please select a Wallet');
            } else {
                $.ajax({
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html',
                    url: 'StoredBeneficiaryHandler/',
                    dataType: 'html',
                    data: {
                        RecipientId: accountId
                    }
                }).success(function (result) {

                    result = eval("(" + result + ")");
                    var num = $("#Amount").val();
                    $(".t-formatted-value:first").text(result.Currency + " " + num);
                });
            }

        });
        $("#Amount").bind('change blur', function (e) {
            var accountId = $("#AccountId").val();
            if (accountId == '0' || accountId == "") {
                alert('[Error: Select a Wallet] Please select a Wallet');
            } else {
                $.ajax({
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html',
                    url: 'StoredBeneficiaryHandler/',
                    dataType: 'html',
                    data: {
                        RecipientId: accountId
                    }
                }).success(function (result) {
                    result = eval("(" + result + ")");
                    var num = $("#Amount").val();
                    $(".t-formatted-value:first").text(result.Currency + " " + num);
                });
            }
        });
        $("#Amount").bind('load', function (e) {
            
        });
    });            
</script>
<div id="page" class="container">

<h2>Send Money</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken("sendmoneysalt")
    @Html.ValidationSummary(false)
  
    <div>
        <fieldset><legend>Transaction Details</legend>
            @Html.Label("Select Wallet")
            <br />@(Html.Telerik().DropDownList().HtmlAttributes(new { style = "width: 200px" })
                                                    .Name("AccountId")
                                                    .BindTo(Model.Accounts)
                                                    .Placeholder("--- Select a Wallet ---")
                                                    )
                                                    <br />
   
             <br />   @(Html.LabelFor(p => p.Amount)) 
                <br />@(Html.Telerik().CurrencyTextBoxFor(p => p.Amount))
                
        </fieldset>
    </div>
    <p />
    <fieldset><legend>Recipient Details</legend>
    @Html.Label("Select a Stored Beneficiary")
    <br />@(Html.Telerik().DropDownList().HtmlAttributes(new { style = "width: 250px" })
                                                    .Name("RecipientId")
                                                    .BindTo(Model.Beneficiaries)
                                                    .Placeholder("--Select Recipient--")
                                             )
                                                  <br />
    @(Html.LabelFor(p => p.FirstName))
    <br /> @(Html.TextBoxFor(p => p.FirstName))
    <br />@(Html.LabelFor(p => p.LastName)) 
    <br />@(Html.TextBoxFor(p => p.LastName))
    <br />@Html.Label("Select Recipient Country")
    <br />@(Html.Telerik().DropDownList().HtmlAttributes(new { style = "width: 250px" })
                                        .Name("CountryId")
                                        .BindTo(Model.Countries)
                                        .Placeholder("--Select a Country--")
                                        )
    <br />
        <br />@Html.Label("Select Wallet Provider")
    <br />@(Html.Telerik().DropDownList().HtmlAttributes(new { style = "width: 250px" })
                                            .Name("PartnerId")
                                            .BindTo(Model.Partners)
                                            .Placeholder("--Select a Wallet Provider--"))
    <br />@(Html.LabelFor(p => p.RecipientMSISDN)) 
    <br />@Html.TextBoxFor(p => p.CountryCode, new { style = "width: 40px" })&nbsp @(Html.EditorFor(p => p.RecipientMSISDN))
    <br />@Html.Label("Select Identification Type")
    <br />@(Html.Telerik().DropDownList().HtmlAttributes(new { style = "width: 250px" })
                                        .Name("IdentificationTypeId")
                                        .BindTo(Model.IdentificationTypes)
                                        .Placeholder("--Select Identification Type--")
                                        )
    <br />@(Html.LabelFor(p => p.IdentificationNumber))
    <br />@(Html.TextBoxFor(p => p.IdentificationNumber))

                                         <br /><br />
@(Html.CheckBoxFor(p => p.saveBeneficiary) ) @(Html.LabelFor(p => p.saveBeneficiary) )
    </fieldset> 
        <p><input type="submit" value="Send" class="t-button t-button-icontext" 
            style="border: none; height: 32px; cursor: pointer; margin-top: 20px; margin-left: 20px"/>
            <input type="reset" value="Cancel" class="t-button t-button-icontext" 
            style="border: none; height: 32px; cursor: pointer; margin-top: 20px; margin-left: 5px"/>
            
        </p>  
}
</div>